import { createApp } from 'vue/dist/vue.esm-bundler.js'

export default {
  loading() {
    const app = createApp({
      template: `
        <div class="full-screen-loading">
          <SmartLoading></SmartLoading>
        </div>
      `,
      methods: {
        close() {
          app.unmount()
        }
      }
    })

    const vm = app.mount(document.createElement('div'))
    document.querySelector('#app-main').appendChild(vm.$el)
    return vm
  },
  alert(msg) {
    const app = createApp({
      template: `
        <div class="sys-dialog sys-alert">
          <div class="inner">
            <div class="sys-dialog-title">
              <div class="auto-flex">
                <i class="glyphicon glyphicon-exclamation-sign"></i>
                <strong>提示</strong>
              </div>
            </div>
            <div class="msg" v-html="msg"></div>
            <div class="wrap-control"
              @keydown.esc="close"
              @keydown.enter="close"
            >
              <div ref="btnConfirm" tabindex="-1" class="btn-confirm"
                @click="close()"
              >确定</div>
            </div>
          </div>
        </div>
      `,
      data() {
        return { msg }
      },
      methods: {
        close() {
          app.unmount()
        },
      },
      async mounted() {
        await sleep(10)
        this.$refs.btnConfirm.focus()
      }
    })
    const vm = app.mount(document.createElement('div'))
    document.getElementById('app-main').appendChild(vm.$el)
    return vm
  },
  confirm(msg) {
    const app = createApp({
      template: `
        <div class="sys-dialog sys-confirm">
          <div class="inner">
            <div class="sys-dialog-title">
              <strong class="f16">提示</strong>
            </div>
            <div class="msg" v-html="msg"></div>
            <div class="wrap-control"
              @keydown.esc="close"
              @keydown.enter="close"
            >
              <div ref="btnCancel" tabindex="-1" class="btn-cancel"
                @click="close()"
              >取消</div>
              <div ref="btnConfirm" tabindex="-1" class="btn-confirm"
                @click="handleConfirm()"
              >确定</div>
            </div>
          </div>
        </div>
      `,
      data() {
        return { msg }
      },
      methods: {
        close() {
          this.oncancel && this.oncancel()
          app.unmount()
        },
        handleConfirm() {
          this.onconfirm && this.onconfirm()
          this.close()
        },
      },
      mounted() {
        this.$refs.btnConfirm.focus()
      }
    })
    const vm = app.mount(document.createElement('div'))
    document.getElementById('app-main').appendChild(vm.$el)

    return new Promise((resolve, reject) => {
      vm.onconfirm = resolve
      vm.oncancel = reject
    })
  },
}